<template>
	<view class="container">
		<uni-nav-bar class="nav" height="88rpx" backgroundColor="#fff" leftWidth="231rpx" rightWidth="231rpx" :border="false" color="#333" fixed="true" :padding="false">
			<template slot="left">
			</template>
			<view class="tab-nav flex-r ac jc">
				<text class="color-grey" v-for="(item,index) in navTab.tabList" :class="{'active': navTab.tabCur == index}" :key="index" @tap="tabChange(index)">{{item}}</text>
			</view>
			<template slot="right">
				<image class="right" src="@/public/images/public/dhl_ss.png" mode="aspectFit" @tap="goSearch('matchsearch')"></image>
				<image class="right" src="@/public/images/public/dhl_sx.png" mode="aspectFit" @tap="goSearch('matchfilter')"></image>
			</template>
		</uni-nav-bar>
		<view class="head flex-r ac navborder">
			<view class="list-item flex-c ac jc" v-for="(item,index) in dayListData" @tap="dayChange(index)" :key="index" :class="{'active': dayCur.tabCur == index}">
				<text class="week text-secondary">{{item[0]}}</text>
				<text class="day text-info">{{item[1]}}</text>
			</view>
		</view>
		<scroll-view
			class="scroll-Y" 
			:refresher-enabled="true" 
			refresher-default-style="none" 
			:scroll-y="true"
			:refresher-triggered="refreshing"
			refresher-background="rgba(255, 255, 255, 0)"
			:scroll-top="scrollTop"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
		<template v-for="(list, index) in matchList">
			<keep-alive>
			<view class="body" @touchstart="touchStart" @touchend="touchEnd" v-if="navTab.tabCur == index" :key="index">
				<template v-for="(listData, key, indexs) in list">
					<view v-if="dayCur.tabCur == key && navTab.tabCur == index" :key="indexs">
						<EmptyContent v-if="!listData[0]" top="160rpx" text="暂无比赛" img="qsy_zwxl" @refresh="getFilterData"></EmptyContent>
						<MatchList v-else :sportId="sportId" :matchList="listData" :isEnd="dayCur.tabData[dayCur.tabCur].isEnd"></MatchList>
					</view>
				</template>
			</view>
			</keep-alive>
		</template>
		</scroll-view>
		<AppDown v-if="platform!='ios'"></AppDown>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				matchList: [{},{}],
				navTab: {
					tabList: ['足球','篮球'],
					tabArr: [],
					tabCur: 0,
				},
				dayTab: [
					{
						tabData: [
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0}
						],
						tabArr: [],
						tabCur: 1,
					},
					{
						tabData: [
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0},
							{pageNo: 1,	isEnd: false, top: 0}
						],
						tabArr: [],
						tabCur: 1,
					}
				],
				
				datetime: null,
				dayList: [-1,0,1,2,3],
				dayListData: [],
				weekDay: ['周日','周一','周二','周三','周四','周五','周六','今天'],
				
				matchType: [2,1],
				filter: false,
				compIds: [],
				canFlush: true,
				refreshing: false,
				
				scrollTop: 0
			}
		},
		components: {
			MatchList: () => import('@/components/ch-match/ch-matchlist')
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			dayCur() {
				return this.dayTab[this.navTab.tabCur]
			},
			sportId() {
				return this.navTab.tabCur+1
			},
			noFollow() {
				return this.$store.state.matchNoFollow
			},
			isFollow() {
				return this.$store.state.matchFollow
			}
		},
		onLoad(){
			this.dayList.forEach(item => {
				let day = this.getDateStr(item)
				this.dayListData.push(day)
			})
			if(this.$Route.query.day){
				this.datetime = this.$Route.query.day
				this.$nextTick(() => {
					let index = this.dayListData.findIndex(item => {
						return item[2] == this.$Route.query.day
					})
					this.dayCur.tabCur = index
				})
			}
			this.navTab.tabArr.push(this.navTab.tabCur)
			//this.dayTab[this.navTab.tabCur].tabArr.push(this.dayCur.tabCur)
			this.getFilterData()
		},
		onShow() {
			if(Object.keys(this.$Route.query).length != 0){
				console.log(this.$Route.query);
				//切换足球篮球
				if(this.$Route.query.sportId){
					this.navTab.tabCur = this.$Route.query.sportId - 1
				}
				this.getFilterData()
			}
		},
		onTabItemTap(e) {
			console.log(e);
			if (this.tabClick) { // 200ms 内再次点击
				//重置状态
				this.scrollTop = 1
				this.$nextTick(()=>{
					this.scrollTop = 0
				})
			}
			this.tabClick = true
			setTimeout(() => {
				this.tabClick = false // 200ms 内没有第二次点击，就当作单击
			}, 500)
		},
		updated() {
			console.log(this.sportId,'sprotId')
		},
		methods: {
			scroll(e) {
				this.dayCur.tabData[this.dayCur.tabCur].top = e.detail.scrollTop
			},
			//上滑加载
			reachBottom() {
				if(!this.dayCur.tabData[this.dayCur.tabCur].isEnd){
					this.getMatchList()
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				let day = this.$CHS.getNowDate()
				if(day != this.dayListData[1][2]){
					this.dayListData = []
					this.dayList.forEach(item => {
						let day = this.getDateStr(item)
						this.dayListData.push(day)
					})
					this.datetime = this.dayListData[this.dayCur.tabCur][2]
				}
				this.dayCur.tabData[this.dayCur.tabCur].pageNo = 1
				this.getMatchList()
				setTimeout(() => {
					this.refreshing = false
				}, 1000)
			},
			//比赛筛选
			getFilterData() {
				//本地缓存上次筛选
				let today = this.$CHS.getNowDate()
				let selectMatchData = uni.getStorageSync('selectMatchIds_'+this.sportId.toString()) || null
				if(selectMatchData && typeof selectMatchData != 'string'){
					if(selectMatchData.today && selectMatchData.today == today){//赛事筛选当天有效
						this.filter = true
						this.compIds[this.navTab.tabCur] = selectMatchData.selectIds
						this.matchType[this.navTab.tabCur] = selectMatchData.matchType
					}
					//类型筛选长期有效
					//this.matchType[this.navTab.tabCur] = selectMatchData.matchType
				}else{
					//重置类型
					if(this.$Route.query.matchType != null){
						this.matchType[this.navTab.tabCur] = this.$Route.query.matchType
					}
					//重置赛事id
					this.compIds[this.navTab.tabCur] = null
				}
				this.dayCur.tabData[this.dayCur.tabCur].pageNo = 1
				this.getMatchList()
			},
			//进入搜索筛选
			goSearch(name){
				if(name == 'matchfilter'){
					this.canFlush = true
				}
				let params = {sportId: this.sportId, day: this.dayListData[this.dayCur.tabCur][2], type: this.matchType[this.navTab.tabCur]}
				this.$goByName(name, params)
			},
			//获取赛事
			getMatchList(){
				//获取当前日期
				if(!this.datetime){
					if(this.dayListData[this.dayCur.tabCur]){
						this.datetime = this.dayListData[this.dayCur.tabCur][2]
					}else{
						let dayData = this.getDateStr(this.dayList[this.dayCur.tabCur])
						this.datetime = dayData[2]
					}
				}
				//基础数据
				let data = {
					datetime: this.datetime,
					sportId: this.sportId,
					type: this.matchType[this.navTab.tabCur],
					pageNo: this.dayCur.tabData[this.dayCur.tabCur].pageNo,
					pageSize: 15,
					userId: this.user.userId
				}
				//赛事筛选
				if(this.filter && this.compIds[this.navTab.tabCur]){
					data.compIds = this.compIds[this.navTab.tabCur]
				}
				//发送请求
				this.$http.post({
					url: '/api/queryMatchRows',
					data
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.$set(this.matchList[this.navTab.tabCur], this.dayCur.tabCur, data.result.records)
						}else{
							this.matchList[this.navTab.tabCur][this.dayCur.tabCur].push(...data.result.records)
						}
						this.dayCur.tabData[this.dayCur.tabCur].isEnd = data.result.current >= data.result.pages
						this.dayCur.tabData[this.dayCur.tabCur].pageNo = data.result.current + 1
					}else{
						if(data.result.current == 1){
							this.$set(this.matchList[this.navTab.tabCur], this.dayCur.tabCur, [])
						}
					}
					if(data.result.current == 1){
						this.scrollTop = 1
						this.$nextTick(()=>{
							this.scrollTop = 0
						})
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//选项卡切换
			tabChange(index) {
				this.navTab.tabCur = index;
				this.datetime = this.dayListData[this.dayCur.tabCur][2]
				if(this.navTab.tabArr.indexOf(index) < 0){
					this.navTab.tabArr.push(index)
					//this.dayTab[this.navTab.tabCur].tabArr.push(this.dayCur.tabCur)
					this.getFilterData()
				}
				this.$nextTick(()=>{
					this.scrollTop = this.dayCur.tabData[this.dayCur.tabCur].top
				})
			},
			//日期切换
			dayChange(index){
				this.dayTab[this.navTab.tabCur].tabCur = index;
				this.datetime = this.dayListData[this.dayCur.tabCur][2]
				/* if(this.dayTab[this.navTab.tabCur].tabArr.indexOf(index) < 0){
					this.dayTab[this.navTab.tabCur].tabArr.push(index)
					this.getMatchList(this.dayCur.tabData[this.dayCur.tabCur].pageNo)
				} */
				if(!this.matchList[this.navTab.tabCur][this.dayCur.tabCur] || !this.matchList[this.navTab.tabCur][this.dayCur.tabCur][0]){
					this.dayCur.tabData[this.dayCur.tabCur].pageNo = 1
					this.getMatchList()
				}
				this.$nextTick(()=>{
					this.scrollTop = this.dayCur.tabData[this.dayCur.tabCur].top
				})
			},
			//获取指定时间数组
			getDateStr(AddDayCount) {
			    let dd = new Date(); 
			    dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期 
				let y = dd.getFullYear();
			    let m = dd.getMonth()+1;//获取当前月份的日期 
			    let d = dd.getDate();
				let week = dd.getDay()
				if(AddDayCount == 0){
					week = 7
				}
				m = m.toString().padStart(2, '0')
				d = d.toString().padStart(2, '0')
				let dayArr = [ this.weekDay[week], m+"."+d, y+'-'+m+'-'+d]
				//console.log(dayArr);
				return dayArr
			},
			//触摸滑动开始
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			//触摸滑动结束
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.dayCur.tabCur > 0){
							this.dayChange(this.dayCur.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.dayCur.tabData.length - 1;
						if(this.dayCur.tabCur < maxlen){
							this.dayChange(this.dayCur.tabCur + 1)
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		.nav{
			.rank-btn{
				width: 160rpx;
				height: 48rpx;
				background: #F2F7FF;
				border: 1rpx solid #0055FF;
				border-radius: 24rpx;
				padding: 0;
				margin: 0;
				margin-left: 20rpx;
				image{
					width: 24rpx;
					height: 24rpx;
					margin-right: 10rpx;
				}
			}
			.tab-nav{
				width: 100%;
				font-size: 36rpx;
				font-weight: 500;
				.color-grey{
					flex: 2;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					&.active{
						color: #333333;
					}
				}
			}
			.right{
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}
		.head{
			z-index: 2;
			position: fixed;
			left: 0;
			right: 0;
			max-width: $max-width;
			margin: $pc-margin;
			background-color: #ffffff;
			box-sizing: border-box;
			.list-item{
				width: 20%;
				height: 88rpx;
				.week{
					font-weight: 500;
				}
				.day{
					margin-top: 12rpx;
					color: #999999
				}
				&.active{
					.week, .day{
						color: #0055FF;
					}
					background: #fff url("~@/public/images/match/rlhk.png") center bottom/80rpx 4rpx no-repeat;
				}
			}
		}
		.scroll-Y{
			padding-top: 88rpx;
			height: calc(var(--safe-height) - #{$tabbar-height} - #{$navbar-height} - 88rpx);
			/deep/ .uni-scroll-view-content{
				padding-top: 10rpx;
				height: calc(100% - 10rpx);
			}
		}
		.body{
			margin-top: 10rpx;
		}
	}
</style>
